<template>
  <div class="card">
    <div class="pageHeader">
      会籍卡列表
      <img src="@/static/images/arrow-left.png" alt="" @click="back">
    </div>
    <div class="container">
      <div class="item acea-row row-middle" v-for="(item,index) in list" :key="index" :style="'background-image: url('+bgList[index]+');'">
        <div class="logo">
          <img :src="config.baseUrl_xbq+item.club.logo" alt="">
        </div>
        <div class="info acea-row row-column">
          <span class="title">{{item.name}}</span>
          <div class="price acea-row row-middle">
            <p class="line1">入会费 {{item.price | changePrice}}万元</p>
            <p>年费 {{item.year_price}}元/年</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "api"
import config from "api/config"
import axios from 'axios'
import { Toast } from 'vant'
import bg01 from 'static/images/membercardbg_1.png'
import bg02 from 'static/images/membercardbg_2.png'
import bg03 from 'static/images/membercardbg_3.png'
import bg04 from 'static/images/membercardbg_4.png'
import bg05 from 'static/images/membercardbg_5.png'
import bg06 from 'static/images/membercardbg_6.png'
import bg07 from 'static/images/membercardbg_7.png'
import bg08 from 'static/images/membercardbg_8.png'


export default {
  data() {
    return {
      config,
      list:{},
      bgList:[bg01,bg02,bg03,bg04,bg05,bg06,bg07,bg08],
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData(){
      Toast.loading({
        message:"加载中...",
        duration:0
      })
      let club_id = this.$route.params.id
      api.get("/index/PublishCardList",{club_id}).then(e=>{
        Toast.clear()
        this.list = e.data.data
      })
    },
    back(){
      this.$router.go(-1);//返回上一层
    }
  },
  filters:{
    changePrice(e){
      let base = [10,100,1000,10000]
      let num = 0
      for(let i of base){
        if(e%i > 0){
          num++
        }
      }
      return (e/10000).toFixed(num)
    }
  }
}
</script>

<style scoped>
  .card{
    min-height: 100vh;
  }
  .container{
    padding: 30px;
  }
  .container .item{
    padding: 45px 30px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 30px;
    border-radius: 20px;
    background-size: cover;
    background-repeat: no-repeat;
  } 
  .container .item:last-of-type{
    margin-bottom: 0;
  }
  .container .item .logo{
    box-sizing: border-box;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    overflow: hidden;
  }
  .container .item .logo img{
    width: 100%;
    height: 100%;
    display: block;
    
  }
  .container .item .info{
    margin-left: 30px;
    color: #ffffff;
  }
  .container .item .info .title{
    font-size: 32px;
    margin-bottom: 20px;
    font-weight: bold;
  }
  .container .item .info .price{
    font-size: 26px;
  }
  .container .item .info .price .line1{
    margin-right: 20px;
  }
</style>